<template>
    <div>
        <div class="header-container hidden md:block">
            <el-row class="w-full">
                <el-col :xs="24" :sm="6" :md="6" :lg="6">
                    <div class="flex items-center justify-center">
                        <img src="~/assets/img/20211108151658ec4639.png" alt="logo" class="max-h-[74px]" />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" class="menu-container">
                    <el-menu class="pc-top-menu" :default-active="activeIndex" :popper-offset="0" mode="horizontal"
                        @select="handleSelect">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-sub-menu index="2" popper-class="sub-menu-popper-class">
                            <template #title>关于宝岛</template>
                            <el-menu-item index="2-1">宝岛是谁</el-menu-item>
                            <el-menu-item index="2-2">企业文化</el-menu-item>
                            <el-menu-item index="2-3">企业生涯</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>宝岛出品</template>
                            <el-menu-item index="2-1">品类</el-menu-item>
                            <el-menu-item index="2-2">电动自行车</el-menu-item>
                            <el-menu-item index="2-3">轻型电摩</el-menu-item>
                            <el-menu-item index="2-3">电动摩托车</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>服务</template>
                            <el-menu-item index="2-1">消费者服务</el-menu-item>
                            <el-menu-item index="2-2">经销商服务</el-menu-item>
                            <el-menu-item index="2-3">员工服务</el-menu-item>
                            <el-menu-item index="2-3">骑行顾问</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>宝岛动态</template>
                            <el-menu-item index="2-1">行业动态</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="6">
                            <template #title>信赖</template>
                            <el-menu-item index="2-1">信赖</el-menu-item>
                            <el-menu-item index="2-2">资质</el-menu-item>
                            <el-menu-item index="2-3">联系我们</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
        <div id="mobile-nav" class="mobile-nav md:hidden">
            <div class="header flex flex-nowrap overflow-hidden">
                <div :["data-state"]="drawer ? 'open' : 'closed'"
                    class="data-[state=open]:w-[272px]  data-[state=closed]:w-0 flex-none transition-width"></div>

                <div class="w-full flex flex-none">
                    <div class="flex items-center justify-center w-[50px]" @click="drawer = !drawer">
                        <icon-menu v-if="drawer == false" size="28px" color="#fff" />
                        <icon-close v-else size="28px" color="#fff" />
                    </div>
                    <div class="flex items-center justify-center flex-auto">宝岛电动车官网</div>
                </div>
            </div>
            <el-drawer v-model="drawer" size="272px" direction="ltr" :modal-class="$style['drawer-modal-class']"
                :body-class="$style['drawer-body-class']" :close-delay="10" :modal="false" :with-header="false"
                :append-to-body="true">
                <el-menu>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>关于宝岛</template>
                        <el-menu-item index="2-1">宝岛是谁</el-menu-item>
                        <el-menu-item index="2-2">企业文化</el-menu-item>
                        <el-menu-item index="2-3">企业生涯</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>宝岛出品</template>
                        <el-menu-item index="2-1">品类</el-menu-item>
                        <el-menu-item index="2-2">电动自行车</el-menu-item>
                        <el-menu-item index="2-3">轻型电摩</el-menu-item>
                        <el-menu-item index="2-3">电动摩托车</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>服务</template>
                        <el-menu-item index="2-1">消费者服务</el-menu-item>
                        <el-menu-item index="2-2">经销商服务</el-menu-item>
                        <el-menu-item index="2-3">员工服务</el-menu-item>
                        <el-menu-item index="2-3">骑行顾问</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="5">
                        <template #title>宝岛动态</template>
                        <el-menu-item index="2-1">行业动态</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="6">
                        <template #title>信赖</template>
                        <el-menu-item index="2-1">信赖</el-menu-item>
                        <el-menu-item index="2-2">资质</el-menu-item>
                        <el-menu-item index="2-3">联系我们</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-drawer>

        </div>
    </div>

</template>

<style scoped>
.header-container {
    height: 80px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    transition: box-shadow 0.5s ease;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

.mobile-nav .header {
    height: 50px;
    background-color: black;
    color: white;
    font-size: 16px;
}

.menu-container {
    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
        padding-left: 42px;
        padding-right: 42px;
    }

    :deep(.el-menu--horizontal) {
        --el-menu-horizontal-height: 80px;
        --el-menu-item-font-size: 15px;
        --el-menu-active-color: #333;
        --el-menu-text-color: #333;
        --el-menu-hover-text-color: #333;

        &>.el-menu {
            border-bottom: 0;
        }

        &>.el-menu-item.is-active {
            border-bottom: 1px solid #d8d8d8;
        }
    }
}
</style>

<style module lang="less">
.drawer-body-class:global(.el-drawer__body) {
    padding: 0;
    background-color: #3e3e3e;
    color: white;
    overflow: hidden;
}

.drawer-modal-class {
    width: 272px;
    height: 100vh;

    :global {
        .el-menu--vertical {
            border: 0;
            --el-menu-bg-color: #3c3c3c;
            --el-menu-vertical-width: 200px;
            --el-menu-item-font-size: 15px;
            --el-menu-active-color: #fff;
            --el-menu-text-color: #fff;
            --el-menu-hover-text-color: #fff;
            --el-menu-hover-bg-color: #3c3c3c;
            --el-menu-level-padding: 40px;
            --el-menu-base-level-padding: 40px;
        }
    }
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'

import { IconMenu, IconClose } from '~/components/icons'
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const drawer = ref(false)
</script>